/**
 * @file 动画GIF(使用动画GIF作为图标的示例), 通过import 引入gifler会报错, 引入后gifler是一个空对象
 */
 import "assets/styles/common/index.less";
 import 'ol/ol.css';
 import Map from 'ol/Map';
 import Point from 'ol/geom/Point';
 import View from 'ol/View';
 import { Icon, Style } from "ol/style";
 import { Stamen, Vector as VectorSource } from "ol/source";
 import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
 import { Feature } from "ol";
 import gifler from 'gifler';
 
  // 实例化一个点特征
 const iconFeature = new Feature({
   geometry: new Point([0, 0])
 })
 
 // 创建一个矢量数据源
 const vectorSource = new VectorSource({
   // 实例化特征列表
   features: [iconFeature]
 })
 
 // 创建一个矢量图层
 const vectorLayer = new VectorLayer({
   source: vectorSource
 })
 
 // 创建一个数据源是Stamen瓦片服务的图层
 const rasterLayer = new TileLayer({
   source: new Stamen({
     layer: 'toner'
   })
 })
 
 const map = new Map({
   layers: [
     rasterLayer,
     vectorLayer
   ],
   target: document.getElementById('map'),
   view: new View({
     center: [0, 0],
     zoom: 2
   })
 })
 
 const gifUrl = '/data/globe.gif';
 const gif = gifler(gifUrl);
 gif.frames(
   document.createElement('canvas'),
   function(ctx, frame) {
     if(!iconFeature.getStyle()) {
      // 设置icon的样式
       iconFeature.setStyle(new Style({
         image: new Icon({
           img: ctx.canvas,
           imgSize: [frame.width, frame.height],
           opacity: 0.8
         })
       }))
     }
     ctx.clearRect(0, 0, frame.width, frame.height)
     ctx.drawImage(frame.buffer, frame.x, frame.y)
     map.render()
   },
   true
 )
 
 map.on('pointermove', (e) => {
  // 获取浏览器事件相对于视口的贴图像素位置。
   const pixel = map.getEventPixel(e.originalEvent)
  //  判断该像素位置下有没有feature特征
   const hit = map.hasFeatureAtPixel(pixel)
  //  获取地图容器dom对象并设置style的鼠标样式
   map.getTarget().style.cursor = hit ? 'pointer' : ''
 })